<template>
    <div id="category">
        <navbar class="home-nav">
            <template v-slot:center>
                <div style="font-size: 0.5rem;">商品分类</div>
            </template>
        </navbar>

        <div style="display: flex;">
            <!-- 左部滚动 -->
            <div class="wrapper">
                <div style="flex-wrap: wrap;" class="flex-center">
                    <div v-for="(item, index) in data.catelist" :key="index" @click="changetit(index, item)"
                        style="font-size: 18px;width: 100%;height: 50px;" class="flex-center">
                        <span style="padding-bottom: 5px;" :class="[data.zindex == index ? 'active' : '']">
                            {{ item.title }}
                        </span>
                    </div>

                </div>
            </div>

            <!-- 右边滚动 -->
            <div class="wrapper2">
                <div style="flex-wrap: wrap;" class="flex-start">
                    <div v-for="(item, index) in data.cateimg" :key="index" style="width: 33.3%;height: 3.2rem;"
                        class="flex-colum-center">
                        <!-- 图片 -->
                        <img :src="item.image" style="width: 1.3333rem;height: 1.3333rem;">
                        <!-- 文字 -->
                        <span style="font-size: 18px;margin-top: .3667rem;">{{ item.title }}</span>
                    </div>
                </div>
            </div>


        </div>

    </div>
</template>

<script setup>
import navbar from '../../components/navbar.vue'
import { reactive, onMounted, nextTick } from 'vue'
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import { getCategory, getSubcategory, getCategoryDetail } from "../../network/category.js";

// 注册插件
BScroll.use(Pullup)

let data = reactive({
    catelist: [],
    zindex: 0,
    cateid: "",
    cateimg: [],
    scroll: {},
    scroll2: {}
})
// 请求分类标题
getCategory().then((res) => {
    console.log('getCategory', res)
    data.catelist = res.data.category.list
    data.cateid = data.catelist[0].maitKey
    // initscroll()
    getcatedetail(data.cateid)

})

let changetit = (index, item) => {
    data.zindex = index
    data.cateid = item.maitKey
    getcatedetail(data.cateid)
    nextTick(()=>{
        scrollTo(0,0,500)
    })
}

// 请求分类详细
let getcatedetail = (cateid) => {
    getSubcategory(cateid).then((res) => {
        console.log('getSubcategory', res);
        data.cateimg = res.data.list
        // initscrolle2()
    })
}

onMounted(()=>{
    setTimeout(()=>{
        initscroll()
        initscrolle2()
    },500)
})

let initscroll = () => {
    // 初始化化better-scroll
    nextTick(() => {
        data.scroll = new BScroll('.wrapper', {
            scrollY: true,
            click: true,
            probeType: 3,
            pullUpLoad: true
        })
        data.scroll.on('pullingUp', () => {
            console.log("下拉刷新拉");

        })
    })
}

let initscrolle2 = () => {
    nextTick(() => {
        data.scroll2 = new BScroll('.wrapper2', {
            scrollY: true,
            click: true,
            probeType: 3
        })

    })
}


let scrollTo = (x, y, time) => {
    console.log('触发了scrollto');
    data.scroll2.scrollTo(x, y, time)
}











</script>

<style scoped>
#category {
    height: 100vh;
}

.nav-bar {
    background-color: var(--color-tint);
    font-weight: 700;
    color: #fff;
}

.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;

    display: flex;
}

#tab-content {
    height: 100%;
    flex: 1;
}

.wrapper {
    width: 25%;
    height: 86vh;
    overflow: hidden;
}

.active {
    border-bottom: 1px solid #dd001b;
}

.wrapper2 {
    width: 75%;
    height: 86vh;
    overflow: hidden;
}
</style>